<template>
	<div style="height: 400px" ref="homeLineRef"></div>
</template>

<script setup name="LINE">
import * as echarts from 'echarts';

const props = defineProps({
	line_x: {
		type: Array,
		default: () => [],
	},
	lineData: {
		type: Array,
		default: () => [],
	},
	seriesData: {
		type: Array,
		default: () => [],
	},
});
// 引入组件
const homeLineRef = ref();
let line;
//柱状图
const initLineChart = () => {
	line = markRaw(echarts.init(homeLineRef.value, ''));

	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999',
				},
			},
		},
		toolbox: {
			feature: {
				dataView: { show: true, readOnly: false },
				magicType: { show: true, type: ['line', 'bar'] },
				restore: { show: true },
				saveAsImage: { show: true },
			},
		},
		legend: {},
		xAxis: [
			{
				type: 'category',
				data: props.line_x,
				axisPointer: {
					type: 'shadow',
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				name: '',
				min: 0,
				max: 250,
				interval: 50,
				axisLabel: {
					formatter: '{value}',
				},
			},
			{
				type: 'value',
				name: '',
				min: 0,
				max: 25,
				interval: 5,
				axisLabel: {
					formatter: '{value}',
				},
			},
		],
		series: props.seriesData,
	};
	line.setOption(option);
};

onMounted(() => {
	initLineChart();
});
</script>
